<template>
	<view class="tousuPage">
		<!-- 诉求填写 -->
		<view class="header">
			<text class="appeal">诉求填写</text>
			<text class="problem">请确保反馈的问题真实有效</text>
			<button class="btn" @tap.stop="$openPage('/pagesEdit/complaint')">我要投诉</button>
		</view>

		<!--  -->
		<scroll-view class="scrollView" enable-flex :scroll-x="true">
			<view class="v" @tap="" :id="'v'+k" v-for="(v,k) of navList" :key="k">{{v}}
			</view>
		</scroll-view>

		<!-- 内容区域 -->
		<view class="" style="height: 200vh; background-color: red;">

		</view>

		<!--  -->
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, getCurrentInstance } from "vue"
	// 全局引入
	let { appContext } = getCurrentInstance();
	let { $openPage } = appContext.config.globalProperties;

	let navList = ["融资", "生产成本", "项目用地", "减税降费", "承诺兑现", "拖欠款项", "政商关系", "其它"]
	let index = ref(0);
</script>

<style lang="scss" scoped>
	.tousuPage {
		background-color: #f4f6f6;
		color: #fff;
		min-height: inherit;
		display: flex;
		flex-direction: column;
	}

	.header {
		display: flex;
		flex-direction: column;
		padding: 30rpx 20rpx 0;
		color: #fff;
		position: relative;
		background-color: transparent;
		z-index: 1;

		.appeal {
			font-size: 48rpx;
			font-weight: 500;
		}

		.problem {
			font-size: 28rpx;
			margin: 20rpx 0rpx;
		}

		.btn {
			width: 500rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #fff;
			box-shadow: 0px 6px 10px 0px rgba(26, 80, 189, 0.15), inset 0px -2px 10px 0px rgba(173, 209, 255, 0.5);
			border-radius: 50rpx !important;
			text-align: center;
			font-size: 18px;
			font-weight: 600;
			color: #2163E0;
			align-self: center;
		}

		&::before {
			width: 100%;
			// 45rpx: 是 btn的高度的一半了
			height: calc(100% - 30rpx);
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			z-index: -1;
			border-radius: 0 0 50% 50%/20%;
			background: #3782fe url("https://nntzback.jyhdkj.com/profile/upload/2022/11/18/ch_tousu_20221118100407A001.png") no-repeat fixed 98% 10px;
			background-size: 75px 75px;
		}
	}

	.scrollView {
		display: flex;
		background-color: pink;
		height: 40px;
		white-space: nowrap;
		position: sticky;
		top: 0;
	}

	.v {
		flex: 0 0 25vw;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		transition: all 0.5;
		color: #303133;
	}

	.selectV {
		font-weight: bold;
		color: #2163E0;
	}
</style>
